<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Acceleration</title>
        <link rel="stylesheet" type="text/css" href="default.css">
        <script type="text/javascript" src="http://www.big5apps.com/api/bigfive.js">
        </script>
        <script type="text/javascript">
            
            var ball = null
            var scale = 180
            
            function move(x, y, z){
            
                // Fit to screen
                var dx = -x * scale
                var dy = y * scale
                
                // Center
                var posX = (480 / 2 + dy - 4)
                var posY = (320 / 2 + dx - 4)
                
                // Set position
                ball.style.top = posX + "px"
                ball.style.left = posY + "px"
            }
            
            function start(){
                Device.Acceleration.start(move)
            }
            
            function stop(){
                Device.Acceleration.stop()
            }
            
            window.onload = function(){
                ball = $('ball')
                start()
            }
        </script>
        <style type="text/css">
            body {
              margin: 0;
              padding: 0;
              overflow: hidden;
              font-size: 125%;
            }
        </style>
    </head>
    <body>
        <h1>Acceleration Demo</h1>
        <a id="back" href="index.html">Back</a>
        <div id="middle" style="position: absolute; top: 236px; left: 156px; width: 9px; height: 9px; background: silver;">
        </div>
        <div id="ball" style="position: absolute; top: 236px; left: 156px; width: 9px; height: 9px; background: red;">
        </div>
        <div align="center" style="position: absolute; bottom: 12px; left: 0; width: 100%;">
            <button onclick="start()">
                Start
            </button>
            &nbsp;
            <button onclick="stop()">
                Stop
            </button>
        </div>
    </body>
</html>
